<template>
	<div>
		<Gheader :showheader="top"></Gheader>
		<Scroll class="wrapper">
			<div>
				<p class="topWarning" v-if="Object.keys(defAdd).length!=0">根据海关要求,实名信息的真实姓名与支付方式的姓名需一致,否则会导致清关失败无法发货</p>
				<div class="address">
					<div v-if="Object.keys(defAdd).length!=0">
						<div class="changAddBtn">
							修改地址
						</div>
						<p class="address-name">{{defAdd.name}}&nbsp;&nbsp;&nbsp;{{defAdd.phone}}</p>
						<p class="address-add">{{defAdd.add}}；邮编{{defAdd.postcode}}</p>
					</div>
					<div v-else>
						<div class="addAddress">
							<span>+</span>
							添加收货地址
						</div>
					</div>
				</div>
				<div class="realName">
					<div v-if="Object.keys(defAdd).length!=0">
						<h5 class="realName-top">实名认证<em></em><span>请确保姓名与支付方式的姓名一致</span></h5>
						<p class="address-name">{{defAdd.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{defAdd.IDnumber}}</p>
						<div class="realName-b">
							<span class="bianji">编辑</span><span class="shanchu">删除</span>
						</div>
					</div>
				</div>
				<div class="order">
					<h5>海外直邮订单</h5>
					<div class="commodity" v-for="(item,index) in order.commoditys" v-if="(index==0||up)&&item.xuanzhong==1" :key="index">
						<div class="commodityLeft">
							<div class="ll">
								<img :src="item.imgurl" class="commodityImg"/>
							</div>
							
						</div>
						<div class="commodityRight">
							<h4>{{item.name}}</h4>
							<h5>规格:<span>{{item.type}}</span></h5>
							<h5>综合税:<span>{{item.taxes}}%</span></h5>
							<div class="commodityRight-b">
								¥{{item.price}}<span>x {{item.num}} 件</span>
							</div>
						</div>
					</div>
					<div class="order-b" @click="changup" v-if="order.commoditys.length>1">
						<span class="order-b-down" v-if="!up">展开</span>
						<span class="order-b-up" v-else>收起</span>
					</div>
				</div>
				
				<div class="orderPrice">
					<div><span>¥{{order.allPrice.toFixed(2)}}</span>商品金额: </div>
					<div><span>¥50.00</span>订单邮费: </div>
					<div><span>¥{{order.allTaxes.toFixed(2)}}</span>关税: </div>
					<div><span>¥{{order.endPrice.toFixed(2)-0+50}}</span>订单金额: </div>
					<p><span>安全提醒：</span>付款成功后，阿拉灯不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成钱款的损失。如有疑问请咨询客服，谨防电话诈骗！</p>
				</div>
				
				<div class="distribution">
					配送方式:<span>{{order.areaType}}</span>
				</div>
				
				<div class="orderfooter">
					<div class="f-top">
						共{{order.num}}件商品<span>应付: <em>¥{{order.endPrice.toFixed(2)-0+50}}</em></span>
					</div>
					<div class="f-bottom">
						<p><span class="icon-xuanzhong" :class="{'lighticon':lighticon}" @click="Light"></span>本人同意并接受<span>《个人委托协议》</span>和<span>《用户协议》</span></p>
						<div class="yes" :class="{'lightyes':lighticon}" @click="yesBtn">确认</div>
					</div>
				</div>
			</div>
		</Scroll>
	   
	</div>
</template>
<script>
	import Slide from "../../../base/ZSlide"
	import Swiper from "../../../base/ZSwiper"
	import Scroll from '../../../base/Scroll'
	import Gheader from '../G-person/person-center/Gheader'
	export default {
		name:'CsureOrder',
		components:{
		    Gheader,
		  	Scroll
		},
		created:function(){
			this.order=this.$store.state.jieObj;
		},
		data(){
			return{
				lighticon:false,
				up:false,
				top: {
					word: "确认订单",
					left: [true, false, false],
					right: [false, false, false, false, false, false],
					leftword: "",
					rightword1: "",
					rightword2: "",
					jiantouurl:""
				},
				defAdd:{
					name:"李四",
					phone:12345678901,
					add:"河南省新乡市红旗区南干道与新中大道 交叉口B座10楼102室",
					postcode:453000,
					IDnumber:4101234567890
				},
				order:{}
				
			}
		},
		methods:{
			yesBtn:function(){
				var jieObj = this.$store.state.jieObj;
				console.log(jieObj)
//				var ordername=this.$store.state.personInfor[0].login.ordername;
//				this.axios.post("/api/changedaifu",{jieObj:jieObj,ordername:ordername}).then(function(data){
//					console.log(data)
//				}.bind(this))
				if(this.lighticon==true){
					this.$router.push({path:"/settlement"});
				}
				
			},
			changup:function(){
				
				this.up = !this.up;
				console.log(this.up)
			},
			Light:function(){
				this.lighticon = !this.lighticon;
			}
		}
	}
</script>
<style scoped>
	.wrapper{
		overflow: hidden;
		height: 90vh;
		background-color: #f2f2f2;
	}
	.wrapper>div{
		background-color: #f2f2f2;
	}
	.topWarning{
		background-color: #666666;
		padding: 0.5rem 0.8rem;
		font-size: 1.15rem;
		font-weight: 200;
		color:white;
	}
	.address{
		margin-top: 0.8rem;
		padding: 0.43rem;		
		background: url(../../../static/C-img/红蓝条_03.png) repeat-x left top,url(../../../static/C-img/红蓝条_03.png) repeat-x left bottom;
		background-size: auto 0.43rem ;
		overflow: hidden;
		background-color: white;
	}
	.changAddBtn{
		font-weight: 200;
		width: 2.8rem;
		height: 2.8rem;
		padding: 0.6rem;
		line-height: 1.4rem;
		text-align: center;
		border:0.1rem solid lightgray;
		border-radius: 50%;
		font-size: 1.3rem;
		color: #808080;
		float: right;
		margin: 2rem 2rem 2rem 5rem;
	}
	.address-name{
		font-size: 1.4rem;
		margin-bottom: 1.2rem;
	}
	.address-add{
		font-size: 1.1rem;
		color: #808080;
	}
	.addAddress{
		padding: 1.5rem;
		font-size: 1.5rem;
		color: #808080;
		font-weight: 200;
	}
	.addAddress>span{
		display: inline-block;
		width: 2rem;
		height: 2rem;
		line-height: 1.7rem;
		font-size: 2rem;
		border: 0.1rem solid #808080;
		border-radius: 50%;
		text-align: center;
		margin-right: 1rem;
	}
	.realName{
		margin-bottom: 1.2rem;
		margin-top: 0.8rem;
		padding: 0.43rem;		
		background: url(../../../static/C-img/五角星2_03.png) repeat-x left top,url(../../../static/C-img/五角星2_03.png) repeat-x left bottom;
		background-size: auto 0.43rem ;
		overflow: hidden;
		background-color: white;
		height: 8rem;
	}
	.realName>div{
		overflow: hidden;
	}
	.realName-top{
		font-size: 1.4rem;
		font-weight: 400;
		color: #4d4d4d;
		padding-bottom: 1rem;
	}
	.realName-top>em{
		background: url(../../../static/C-img/粉色三角_03.png) no-repeat;
		background-size: 100%;
		display: inline-block;
		width: 1rem;
		height: 2rem;
		vertical-align: middle;
	}
	.realName-top>span{
		color:red;
		line-height: 2rem;
		border-radius: 0.5rem;
		display: inline-block;
		font-size: 1.2rem;
		background-color: #f9d3d4;
		padding: 0 0.5rem;
		vertical-align: middle;
	}
	.realName-b{
		float: right;
	}
	.realName-b>span{
		display: inline-block;
		padding-left:1.3rem;
		font-size: 1.3rem;
		line-height: 1.4rem;
		padding-right: 1.3rem;
	}
	.bianji{
		background: url(../../../static/C-img/编辑.png) no-repeat top left;
		background-size: auto 100%;
	}
	.shanchu{
		background: url(../../../static/C-img/删除.png) no-repeat top left;
		background-size: auto 100%;
	}
	.order{
		background-color: white;
		margin-bottom: 1.2rem;
	}
	.order>h5{
		font-size: 1.4rem;
		padding: 1rem 0.5rem;
		font-weight: 400;
		color:#4d4d4d;
		border-bottom: 1px solid lightgray;
	}
	.commodity{
		border-bottom:1px solid lightgray;
		overflow: hidden;
	}
	.commodityLeft{
		float: left;
	}
	.ll{
		width: 3.8rem;
		height: 4rem;
		margin: 2rem;
		margin-left: 3rem;
		text-align: center;
		display: inline-block;
	}
	.commodityImg{
		height: 100%;
	}
	.commodityRight{
		font-weight: 200;
	}
	.commodityRight h4{
		padding: 0.5rem 0;
		font-weight: 200;
		font-size: 1.2rem;
	}
	.commodityRight h5{
		font-weight: 200;
		font-size: 1rem;
	}
	.commodityRight-b{
		color: red;
		line-height: 2.6rem;
	}
	.commodityRight-b span{
		color:gray;
		font-size: 1.1rem;
		margin-left: 2rem;
	}
	.order-b{
		text-align: center;
		font-size: 1.3rem;
		color: #696969;
		padding: 0.5rem;
	}
	.order-b>span{
		padding-right: 2rem;
	}
	.order-b-up{
		background: url(../../../static/C-img/向上.png) no-repeat right center;
		background-size: auto 80%;
	}
	.order-b-down{
		background: url(../../../static/C-img/向下.png) no-repeat right center;
		background-size: auto 80%;
	}
	.orderPrice{
		margin-bottom: 1.2rem;
		background-color: white;
	}
	.orderPrice>div{
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2.8rem;
		padding:0 0.5rem;
		color:#4d4d4d;
		border-bottom: 1px solid lightgray;
	}
	.orderPrice>div>span{
		color: red;
		float: right;
		font-size: 1.1rem;
		line-height: 2.8rem;
	}
	.orderPrice>p{
		font-size: 1.2rem;
		color: #808080;
		padding: 0.5rem;
	}
	.orderPrice>p>span{
		color:red;
		font-size: 1.4rem;
	}
	.distribution{
		background-color: white;
		font-size: 1.4rem;
		padding:0.5rem;
		color: #808080;
		font-weight: 400;
		margin-bottom: 3rem;
	}
	.distribution>span{
		float: right;
	}
	.orderfooter{
		background-color: white;
		font-size: 1.4rem;
	}
	.f-top{
		padding: 0.8rem;
		border-bottom: 1px solid lightgray;
	}
	.f-top>span{
		float: right;
	}
	.f-top>span>em{
		color: red;
		font-style: normal;
		
	}
	.icon-xuanzhong{
		border:1px solid lightgray;
		border-radius: 50%;
		display: inline-block;
		width: 1.3rem;
		height: 1.3rem;
		vertical-align: -0.2rem;
		margin-left: 0.8rem;
	}
	.lighticon{
		background: url(../../../static/C-img/选中.png) no-repeat;
		background-size: 100% 100%;
		border: 1px solid white;
	}
	.f-bottom{
		font-size: 1.3rem;
		overflow: hidden;
	}
	.f-bottom>p{
		padding: 1rem 0;
	}
	.f-bottom>p>span{
		
		color: red;
	}
	.yes{
		width: 80vw;
		background-color: gray;
		color: white;
		line-height: 2rem;
		border-radius: 1rem;
		text-align: center;
		margin: 1rem auto;
	}
	.lightyes{
		background-color: red;
	}
</style>